@WIN8_CHECKBOX_FOCUS_BACKGROUND: @WIN8_SELECTED_BACKGROUND_COLOR;
@WIN8_CHECKBOX_HOVER_BACKGROUND: #2bb0ca;
@WIN8_CHECKBOX_ACTIVE_BACKGROUND: @WIN8_ACCENT_COLOR;

@BORDER_WIDTH: 2px;
@WIN8_CHECKBOX_SIZE: 18px;

.dx-checkbox {
    background: transparent;
    line-height: 0;

    &.dx-state-focused {
        .dx-checkbox-icon {
            background-color: @WIN8_CHECKBOX_FOCUS_BACKGROUND;
        }
    }

    &.dx-state-hover {
        .dx-checkbox-icon {
            background-color: @WIN8_CHECKBOX_HOVER_BACKGROUND;
        }
    }

    &.dx-state-active {
        .dx-checkbox-icon {
            background-color: @WIN8_CHECKBOX_ACTIVE_BACKGROUND;
        }
    }
}

.dx-checkbox-text {
    vertical-align: top;
    margin-left: -18px;
    padding-left: 23px;

    .dx-rtl &,
    .dx-rtl& {
        margin-right: -18px;
        padding-right: 23px;
    }
}

.dx-checkbox-icon {
    .dx-checkbox-checked & {
        .dx-icon-check();
    }

    .dx-checkbox-indeterminate & {
        &:before {
            content: '';
            width: 8px;
            height: 8px;
            background-color: @WIN8_CHECKBOX_BASE_COLOR;
            position: absolute;
            left: 3px;
            top: 3px;
        }
    }

    .dx-checkbox & {
        text-align: center;
        line-height: 14px;
        font-size: 12px;
        font-weight: bold;
        width: @WIN8_CHECKBOX_SIZE;
        height: @WIN8_CHECKBOX_SIZE;
        border: @BORDER_WIDTH solid @WIN8_CHECKBOX_BASE_COLOR;
    }
}

.dx-invalid {
    .dx-checkbox-container {
        .dx-checkbox-icon {
            border: 2px solid @WIN8_FADED_INVALID_COLOR;
        }
    }

    &.dx-state-focused {
        .dx-checkbox-container {
            .dx-checkbox-icon {
                border-color: @WIN8_INVALID_COLOR;
            }
        }
    }
}
